<!-- 销售单内容 -->
<template>
	<view class="">
		<view class="form-view m-t-30">
			<view class="form-item">
				<view class="flex">
					<view class="label">
						单价
					</view>
					<view class="value p-l-12">
						<input type="number" v-model="fromData.price" @input="inputChange" class="input-box">
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="flex" style="flex:1;">
					<view class="label">
						幅宽
					</view>
					<view class="value p-l-12">
						<input type="text" v-model="fromData.widthValue" class="input-box">
					</view>
				</view>
				<view class="flex" style="flex:1;">
					<view class="label">
						克重
					</view>
					<view class="value p-l-12">
						<input type="text" v-model="fromData.gramWeightValue" class="input-box">
					</view>
				</view>
				<view class="flex" style="flex:1.5;">
					<view class="label">
						规格
					</view>
					<view class="value p-l-12">
						<input type="text" v-model="fromData.spec" class="input-box">
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="flex" style="flex:2;">
					<view class="label">
						缸号
					</view>
					<view class="value p-l-12">
						<input type="text" v-model="fromData.vatNo" class="input-box">
					</view>
				</view>
				<!-- <view class="flex" style="flex:1;"></view> -->
				<view class="flex" style="flex:1.5;">
					<view class="label">
						批号
					</view>
					<view class="value p-l-12">

					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="flex">
					<view class="label">
						仓位
					</view>
					<view class="value p-l-12">
					</view>
				</view>
			</view>
		</view>
		<view class="ul-view">
			<view class="li-view" @click="() => { visible = true }">
				{{ airGap }}{{ key }}
			</view>
			<!-- <view class="li-view">
		    行视图
		  </view> -->

			<view style="width: 80%;height: 80px;">
				<cxFineCode @confirm="fineCodeConfirm" :valueArray="valueArray"></cxFineCode>
			</view>
		</view>
		<cxCustomKeyboard  :keyValue="valueArray" :type='keyboardType' @keyFun="keyFun" v-bind:visible="visible"
			@clickGap="clickGap" @close="close" @confirm="confirm" v-on:update:visible="handleVisibleUpdate">
		</cxCustomKeyboard>
	</view>
</template>

<script>
import cxCustomKeyboard from '@/components/cx-custom-keyboard/cx-custom-keyboard.vue'
import cxFineCode from '@/components/cx-fine-code/cx-fine-code.vue'
export default {
	name: '',
	data() {
		return {
			visible: false,
			keyValue: [],
			valueArray: [],
			keyboardType: 0,
			fromData: {
				"price": null, // 单价
				"widthValue": 0, // 幅宽
				"gramWeightValue": 0,  // 克重
				"spec": "",//规格
				"vatNo": "", // 缸号
				positionId: '',//仓位 id
				positionName: '',//仓位 Name
				snVoList: [], // 细码 匹数:piecesCount: 1,数量:quantity: "1"
				spaceDiffValue:null
			},
			airGap: '空差',
			key: '',
		}
	},
	components: {
		cxCustomKeyboard,
		cxFineCode
	},
	methods: {
		inputChange(item){
			this.$emit('inputChange',item.detail.value)
		},
		fineCodeConfirm(item){
			this.fromData.snVoList = []
			item.forEach((e,index) => {
				let data = {piecesCount: index,quantity: e.value }
				this.fromData.snVoList.push(data)
			});
		},
		keyFun(item) {
			this.key = this.key + item
		},
		// 点击取消按钮修改控制组件显隐的值
		handleVisibleUpdate(newValue) {
			this.visible = newValue;
		},
		// 点击取消按钮
		close() {
			console.log('close');
		},
		// 点击确认按钮
		confirm(num) {
			this.fromData.spaceDiffValue = this.airGap + this.key
			this.visible = false
		},
		// 选择空差
		clickGap(item) {
			// console.log('clickGap', item);
			this.airGap = item.value
		}
	}
}
</script>

<style lang="scss" scoped>
.form-view {
	background: #fff;

	.form-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		// font-size: 18rpx;
		border-bottom: 1rpx solid #eee;

		.label {
			min-width: 120rpx;
			text-align: right;
			padding-left: 20rpx;
			color: #7e7e7e;
			// font-size: 28rpx;
		}

		.value {
			flex: 1;

			.input-box {
				// font-size: 24rpx;
			}

			.set {
				color: #409eff;
				text-decoration: underline;
			}
		}
	}
}

.ul-view {
	display: flex;
	padding: 20rpx 40rpx;

	.li-view {
		padding: 10rpx 30rpx;
		border: 1rpx dotted #ddd;
		border-radius: 10rpx;
		margin-right: 10rpx;
		color: #999;
	}
}
</style>